import React from 'react';
import { Input, Form, Button, Space } from 'antd';
import withRouter, { WithRouterProps } from '@/components/withRouter';

const Login: React.FC<WithRouterProps> = (props: WithRouterProps) => {
  const [form] = Form.useForm();
  const layout = {
    labelCol: { span: 8 },
    wrapperCol: { span: 16 },
    style: { maxWidth: 200 }
  };

  const tailLayout = {
    wrapperCol: { offset: 8, span: 16 }
  };
  const onFinish = (values: { token: string }) => {
    localStorage.setItem('token', values.token);
    props.history.push('/');
  };

  const onReset = () => {
    form.resetFields();
  };

  return (
    <div>
      <Form {...layout} form={form} onFinish={onFinish}>
        <Form.Item name="token" label="Token" rules={[{ required: true }]}>
          <Input />
        </Form.Item>
        <Form.Item {...tailLayout}>
          <Space>
            <Button type="primary" htmlType="submit">
              登录
            </Button>
            <Button htmlType="button" onClick={onReset}>
              重置
            </Button>
          </Space>
        </Form.Item>
      </Form>
    </div>
  );
};
export default withRouter(Login);
